<template>
  <div>
    <el-alert
        title="意见反馈"
        type="warning"
        show-icon
    ></el-alert>
    <el-row>
      <el-col :span="4">
        <el-select v-model="opinionType" placeholder="意见类型">
          <el-option label="全部类型" value=""></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="反馈内容关键词" v-model="feedbackContent"></el-input>
      </el-col>
      <!-- 其他筛选条件 -->
      <el-col :span="4">
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <el-table :data="feedbackList" style="width: 100%">
      <el-table-column prop="serialNumber" label="流水号"></el-table-column>
      <el-table-column prop="opinionType" label="意见类型"></el-table-column>
      <el-table-column prop="feedbackContent" label="反馈内容"></el-table-column>
      <el-table-column prop="contact" label="联系方式"></el-table-column>
      <el-table-column prop="source" label="来源"></el-table-column>
      <el-table-column prop="feedbackTime" label="反馈时间"></el-table-column>
      <el-table-column prop="processTime" label="处理时间"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '已完结'" type="success">{{ scope.row.status }}</el-tag>
          <el-tag v-if="scope.row.status === '待处理'" type="warning">{{ scope.row.status }}</el-tag>
          <el-tag v-if="scope.row.status === '跟进中'" type="info">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              v-if="scope.row.status === '待处理'"
              type="text"
              @click="handleProcess(scope.row)"
          >查看并处理</el-button>
          <el-button
              v-if="scope.row.status === '跟进中'"
              type="text"
              @click="showDetails(scope.row)"
          >跟进中</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页展示数据-->
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline:{},
      pageNum:1,
      pageSize:10,
      total:0,
      feedbackList: [],
    };
  },
  methods: {
    findPage() { //查询所有加分页参数
      this.axios.post(`http://localhost:8000/xm-platform/xm-feedback/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.formInline).then(res => {
        console.log(res.data);
        this.feedbackList = res.data.data.records;
        this.total = res.data.data.total;
      })
    },
    handleCurrentChange(val) {//分页方法
      this.pageNum = val;
      this.findPage();
    },
    search() {
      // 这里可以添加搜索逻辑
    },
    reset() {
      // 这里可以添加重置逻辑
    },
    handleProcess(row) {
      // 这里可以添加处理待处理反馈的逻辑
    },
    showDetails(row) {
      // 这里可以添加查看跟进中反馈详情的逻辑
    }
  },
  created() {
    this.findPage();
  }
};
</script>
